<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<script src="../webapp/BootStrap/js/jquery.js"></script>
<script src="../webapp/BootStrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="../webapp/BootStrap/css/bootstrap.css">
<script src="../webapp/static/layui/layui.js"></script>
<link rel="stylesheet" href="../webapp/static/layui/css/layui.css">
<head>
    <meta charset="UTF-8">
    <title>床位管理_床位</title>
    <script>


    </script>
    <style>

        #father{
            background-color: #f0f2f5;
            height: 1200px;
            width: 100%;
            float: right;
            border-width: 2px;
            border-color: #cccccc;
            border-style: solid;
        }
        #top{
            background-color: white;
            height: 7%;
            width: 100%;
            float: left;
        }
        #title{
            background-color: white;
            height: 3.5%;
            padding-top:0.5%;
            width: 100%;
            float: left;
            margin-top: 0.5%;
            font-size: 120%;
        }

        #find{
            background-color: white;
            height: 10%;
            width: 96%;
            float: left;
            margin: 2%;
            border-radius: 5px;
            padding: 1%;
        }
        #bedName{
            padding-bottom: 0.5%;
            float: left;
            width: 70%;
            height:55%;
	        margin: 0 0 5px 300px
        }
        #bedName_left,#bedName_min,#bedName_right{
            float: left;
        }

        #input1{
            width: 400px;
            height: 36px;
            text-align: center;
            font-size: 110%;
        }
        #button1{
            width: 60px;
            height: 36px;
            font-size: 110%;
            background-color: cornflowerblue;
            color: #FFFFFF;
            border: 5px cornflowerblue solid;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        #choice{
            line-height: 0px;
            height: 55%;
            width: 100%;
            float: left;
            padding-bottom: 15px;
        }
     #TheHospital,#TheDepartment,#TheState,#Thepower{
		 width: 30%;
		 height: 35px;
		 float: left;
         margin-left: 10%;
         margin-right: 10%;
	 }
	 #TheState,#Thepower{
		 padding-top: 15px;
	 }
	 #TheHospital,#TheState{

	  }

        .sele1{
            height: 35px;
            width: 20%;
        }
        .sele2{
            height: 35px;
            width: 50%;
        }
		
        #shouyi{
            height: 35px;
            width: 25%;
            float: left;
        }
        #creatTime{
            padding-top: 10px;
            width: 50%;
            height: 25%;
            float: left;
            border: darkgray 1px solid;
			margin-left: 23%;
			padding-left: 1%;
        }
        .text1{
            width: 30%;
            height: 24px;
        }
        #button2{
            width: 100px;
            height: 30px;
            font-size: 90%;
            background-color: gray;
            color: #FFFFFF;
            border: 5px gray solid;
            border-radius: 10px;
        }
        .layui-input{
            width: 255px;
            height: 24px;
			border-color: #A9A9A9;
			border-radius: 5px;
			border-style: solid;
			border-width: 1px;
        }
		
		#main{
		    background-color: white;
		    height:70%;
		    width: 96%;
		    float: left;
			margin: 0% 2% 2%;
			border-radius: 5px;
		    padding: 2%;
		}
		
		.buttongrop1{
			width: 8%;
			height: 6%;
			font-size: 110%;
			background-color: #6495ED;
			color: white;
			border: 1px #6495ED solid;
			border-radius: 3px;
		}
		.buttongrop1:active {
			background-color: white;
			color: black;
			border: 1px lightgray solid;
		    }
		
		#count{
			font-size: 150%;
			width: 96%;
			height:10%;
			background-color: #e4f2ff;
			border: skyblue 2px solid;
			border-radius: 3px;
			margin-top: 2%;
			padding-top: 1%;
			padding-left: 4%;
		}
		
		#tableBox{
			font-size: 90%;
			width: 100%;
			height:80%;
			margin-top: 3%;
		}
		table{
			text-align: center;
			width: 100%;
			border-collapse: separate;
			border-spacing: 0px 12px
		}
		th{
			padding-top: 1%;
			padding-bottom: 1%;
			background-color: #F0F2F5;
            text-align: center;
		}
		tr{
			margin-top: 10px;
			font-size: 120%;
		}
		td{
			border-bottom: lightgray solid 1px;
		}
		
		.turnOff{
		width: 85%;
		height:60%;
		background-color: crimson;
		border: crimson solid 4px;
		border-radius: 6px;
		color: #F0F2F5;
		font-size: 105%;
		}

        .input3{
            width: 65%;
            text-align: center;
            float: right;
        }
        .sele3{
            width: 65%;
            text-align: center;
            float: right;
	        text-align-last: center;
        }
        .time{
            height: 30px;
            width: 100%;
            text-align: center;
            float: left;
        }

        .buttongrop2{
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 5px;
            border: #6495ED 1px solid;

        }
        .buttongrop{
            color: white;
            width: 75px;
            height: 40px;
            background-color:#6495ED;
            border-radius: 5px;
            border:white 0px solid;

        }
        .off,.on{
            width: 80%;
            height: 80%;
            color:white;
            border-radius: 5px;
            border: 0px;
        }
        .off{
            background-color: greenyellow;
        }
        .on{
            background-color: red;
        }


    </style>
    <script>
        request();
        function request(){
            $.ajax({
                url:"/bed/find",
                type:"post",
                datatype:"json",
                success:function(data){
                    show(data);
                }
            })
        }

        function show(data){
            var html2 ="";
            for(var i in data.chuang.list){

                var b=data.chuang.list[i];
                html2+=" <tr>" +

                    "<td>"+b.sesBedType.bedtypeid+"</td>" +
                    "<td>"+b.sesHospitalinfo.hospitalinfoname+"</td>" +
                    "<td>"+b.sesHospitalinfoDepartment.departmentname+"</td>"+
                    "<td>"+b.sesBedType.bedtypecode+"</td>"

                if(b.sesBedType.bedtypestatus==0){
                   html2+="<td style='color:green '>闲</td>"
                   }else if(b.sesBedType.bedtypestatus==1){
                    html2+="<td style='color:yellow'>忙</td>"
                }else if(b.sesBedType.bedtypestatus==2){
                    html2+="<td style='color:red'>异常</td>"
                }else if(b.sesBedType.bedtypestatus==3){
                    html2+="<td style='color:grey'>关机</td>"
                }
                html2+="<td>"+b.sesBedType.bedtypebatterypower+"</td>"+
                    "<td>"+b.bedmessagereamrk+"</td>"
                    if(b.sesBedType.bedtypestatus!=3){
                  html2+=  "<td><input type='button' onclick='change("+b.sesBedType.bedtypeid+","+b.sesBedType.bedtypestatus+")' class='on' value='关机'/></td>"+
                    "</td>"
            }else {
                        html2+= "<td><input type='button' onclick='change("+b.sesBedType.bedtypeid+","+b.sesBedType.bedtypestatus+")' class='off' value='开机'/></td>"+
                            "</td>"
                    }
                    html2+=  "<td><input type='button' onclick='del("+b.bedmessageid+")' value='删除' style='background-color: #9c9c9c;border: #9c9c9c 5px solid;border-radius:5px'></td>"+
                        "</tr>"
            }
            $("tbody").html(html2);

            var yiyuan="";
            var hosp ="选择医院"+
                "<select id='hospital' class='sele2'>"+
                "<option value='0'>-所有医院-</option>"
                    for(var i in data.sesHospitalinfoList){
                        var h =data.sesHospitalinfoList[i];
                        hosp+="<option value='"+h.hospitalinfoid+"'>"+h.hospitalinfoname+"</option>";
                        yiyuan+="<option value='"+h.hospitalinfoid+"'>"+h.hospitalinfoname+"</option>";
                    }
                hosp+="</select>"

            $("#TheHospital").html(hosp);
            $("#hospitalinfoid").html(yiyuan);


            var keshi="";
            var depa="选择科室"+
            "<select id='Department' class='sele2'>"+
            "<option value='0'>-所有科室-</option>"
            for(var i in data.sesHospitalinfoDepartmentList){
                var h =data.sesHospitalinfoDepartmentList[i];
                depa+="<option value='"+h.departmentid+"'>"+h.departmentname+"</option>";
                keshi+="<option value='"+h.departmentid+"'>"+h.departmentname+"</option>";
            }
            depa+="</select>"
            $("#TheDepartment").html(depa);
            $("#hospitalinfoDepartmentid").html(keshi);


            var gu=""
            for(var i in data.gudong){
                var g = data.gudong[i];
                gu+="<option value='"+g.userid+"'>"+g.username+"</option>";

            }
            $("#usershareholderid").html(gu);

            var yiji="";
            for(var i in data.yiji){
                var y =data.yiji[i]
                yiji+="<option value='"+y.userid+"'>"+y.username+"</option>"
            }
            $("#userdistributorsid1").html(yiji);

            var erji="";
            for(var i in data.erji){
                var y =data.erji[i]
                erji+="<option value='"+y.userid+"'>"+y.username+"</option>"
            }
            $("#userdistributorsid2").html(erji);

            var wa="";
            for(var i in data.weixiu){
                var y =data.weixiu[i]
                wa+="<option value='"+y.userid+"'>"+y.username+"</option>"
            }
            $("#usermaintenanceid").html(wa);


            $("#countNum").text("查询到的床位数："+data.chuang.total);

            //分页
            var html3="";
            html3+= "<button type='button' class='buttongrop' onclick='ye("+data.chuang.navigateFirstPage+")'>首页</button>"

            for(var i in data.chuang.navigatepageNums){
                html3+="<button type='button' class='buttongrop2' onclick='ye("+data.chuang.navigatepageNums[i]+")'>"+data.chuang.navigatepageNums[i]+"</button>"
            }
            html3+="<button type='button' class='buttongrop' onclick='ye("+data.chuang.navigateLastPage+")'>尾页</button>"

            $("#fenye").html(html3);


            var gudong="";
            for(var i in data.gudong){
                var gu=data.gudong[i];
                gudong+="<option value='"+gu.userid+"'>"+gu.username+"</option>"
            }
            $("#mgudong").html(gudong);

            var weixiu="";
            for(var i in data.weixiu){
                var xi=data.weixiu[i];
                weixiu+="<option value='"+xi.userid+"'>"+xi.username+"</option>"
            }
            $("#mweixiu").html(weixiu);

            var mchuang=""
            for(var i in data.sesBedTypesList){
                var ch = data.sesBedTypesList[i];
                mchuang+="<option value='"+ch.bedtypeid+"'>"+ch.bedtypeid+"</option>"
            }
            $("#mchuang").html(mchuang);

        }
        function newShow(data){
            var html2 ="";
            for(var i in data.chuang.list){
                var b=data.chuang.list[i];
                html2+=" <tr>" +

                "<td>"+b.sesBedType.bedtypeid+"</td>" +
                "<td>"+b.sesHospitalinfo.hospitalinfoname+"</td>" +
                "<td>"+b.sesHospitalinfoDepartment.departmentname+"</td>"+
                "<td>"+b.sesBedType.bedtypecode+"</td>"

                if(b.sesBedType.bedtypestatus==0){
                    html2+="<td style='color:green '>闲</td>"
                }else if(b.sesBedType.bedtypestatus==1){
                    html2+="<td style='color:yellow'>忙</td>"
                }else if(b.sesBedType.bedtypestatus==2){
                    html2+="<td style='color:red'>异常</td>"
                }else if(b.sesBedType.bedtypestatus==3){
                    html2+="<td style='color:grey'>关机</td>"
                }
                html2+="<td>"+b.sesBedType.bedtypebatterypower+"</td>"+
                    "<td>"+b.bedmessagereamrk+"</td>"
                if(b.sesBedType.bedtypestatus!=3){
                    html2+=  "<td><input type='button' onclick='change("+b.sesBedType.bedtypeid+","+b.sesBedType.bedtypestatus+")' class='on' value='关机'/></td>"+
                        "</td>"
                }else {
                    html2+= "<td><input type='button' onclick='change("+b.sesBedType.bedtypeid+","+b.sesBedType.bedtypestatus+")' class='off' value='开机'/></td>"+
                        "</td>"
                }
                html2+=  "<td><input type='button' onclick='del("+b.bedmessageid+")' value='删除' style='background-color: #9c9c9c;border: #9c9c9c 5px solid;border-radius:5px'></td>"+
                    "</tr>"
            }
            $("tbody").html(html2);

            $("#countNum").text("查询到的床位数："+data.chuang.total);

            //分页
            var html3="";
            html3+= "<button type='button' class='buttongrop' onclick='ye("+data.chuang.navigateFirstPage+")'>首页</button>"

            for(var i in data.chuang.navigatepageNums){
                html3+="<button type='button' class='buttongrop2' onclick='ye("+data.chuang.navigatepageNums[i]+")'>"+data.chuang.navigatepageNums[i]+"</button>"
            }
            html3+="<button type='button' class='buttongrop' onclick='ye("+data.chuang.navigateLastPage+")'>尾页</button>"

            $("#fenye").html(html3);

        }

    function newRequest(){
        $.ajax({
            url:"/bed/find",
            type:"post",
            datatype:"json",
            success:function(data){
                newShow(data);
            }
        })
    }

        function del(id){
            $.ajax({
                url:"/bed/delete",
                type:"delete",
                datatype:"json",
                data:{"bedmessageId":id},
                success:function(data){
                 if(data){
                     newRequest()
                 }else{
                     alert("删除失败！");
                 }


                }
            })
        }

        function change(id,zt){

            if(zt==0){
                zt=3;
            }else if(zt==3){
                zt=0;
            }
            $.ajax({
                url:"/bed/update",
                type:"post",
                datatype:"json",
                data:{"bedtypeStatus":zt,"bedtypeId":id},
                success:function(data){
                 if(data==-1){
                     alert("操作失败！");
                 }else {
                     newRequest();
                 }
                }
            })
        }

        function find(){
            var bedtypeid= $("#input1").val();
            var hospitalinfoId=$("#hospital").val();
            var hospitalinfoDepartmentid=$("#Department").val();
            $.ajax({
                url:"/bed/find",
                type:"post",
                datatype:"json",
                data:{"hospitalinfoId":hospitalinfoId,"bedtypeid":bedtypeid,"hospitalinfoDepartmentid":hospitalinfoDepartmentid},
                success:function(data){
                    newShow(data);
                }
            })
        }

        function pm(num){
            var bedtypeid= $("#input1").val();
            var hospitalinfoId=$("#Hopsital").val();
            var hospitalinfoDepartmentid=$("#Department").val();
            var pageNum=num;
            $.ajax({
                url:"/bed/find",
                type:"post",
                datatype:"json",
                data:{"hospitalinfoId":hospitalinfoId,"bedtypeid":bedtypeid,"hospitalinfoDepartmentid":hospitalinfoDepartmentid,"pageNum":pageNum},
                success:function(data){
                    newShow(data);
                }
            })
        }
        function ye(num){
            pm(num);
        }

        function huan(){
            var id= $("#myiyuan").val();
            $.ajax({
                url:"/bed/findbyid",
                type:"post",
                datatype:"json",
                data:{"hospitalinfoid":id},
                success:function(data){
                    var html="";

                    for(var i in data.keShi){
                        var h = data.keShi[i];

                            html+=  "<option value='"+h.departmentid+"'>"+h.departmentname+"</option>"

                    }
                    $("#mke").html(html);
                }
            })

        }


        function huankeshi(){
            var id= $("#hospitalinfoid").val();
            $.ajax({
                url:"/bed/findbyid",
                type:"post",
                datatype:"json",
                data:{"hospitalinfoid":id},
                success:function(data){
                    var html="";

                    for(var i in data.keShi){
                        var h = data.keShi[i];

                        html+=  "<option value='"+h.departmentid+"'>"+h.departmentname+"</option>"

                    }
                    $("#hospitalinfoDepartmentid").html(html);
                }
            })

        }
    </script>
</head>

<body>
<div id="father">
    <div id="top">

    </div>

    <div id="title">
        &nbsp;&nbsp;<span style="color: #CCCCCC; ">床位管理/</span>床位
    </div>

    <div id="find">
        <div id="bedName">
            <div id="bedName_left">
               <svg xmlns="http://www.w3.org/2000/svg" width="35px" height="35px" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                 <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
               </svg>
            </div>

            <div id="bedName_min">
                <input id="input1" type="text" placeholder="在此输入查询的床位ID" />
            </div>
            <div id="bedName_right">
                <input id="button1" type="button" onclick="find()" value="搜索"/>
            </div>
        </div>

        <div id="choice">
            <div id="TheHospital">
                 选择医院
				   <select id="Hopsital" class="sele2">
				       <option>-所有医院-</option>
				   </select>
            </div>
            <div id="TheDepartment">
                选择科室
				<select id="Department" class="sele2">
                    <option>-所有科室-</option>
                </select>
            </div>
		</div>
    </div>
	
	<div id="main">
        <button type="button" class="buttongrop1" data-toggle="modal" data-target="#myModal">
            新增床位
        </button>
		
		<div id="count">
			<div id="countNum" style="margin-right: 10% ;float: left">总床位数:20000</div>
           <div id="fenye" style="float: left">
           </div>
		</div>
		
		<div id="tableBox">
			
			<table>
				<thead>
					<tr>
						<th>床位ID</th>
						<th>所属医院</th>
						<th>所属科室</th>	
						<th>床位编号</th>
						<th>床位状态</th>
						<th>电池电量</th>
						<th>备注</th>
						<th>远程操作</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>20123123333</td>
						<td>赫特医院</td>
						<td>外科</td>
						<td>123456789</td>
						<td>闲</td>
						<td>30</td>
						<td>2018-10-12 12:20:00</td>
						<td><input class="turnOff" type="button" value="关机"/></td>
						<td> <a>详情</a> | <a>删除</a> </td>
					</tr>

				</tbody>
				
			</table>
			
		</div>
		
	</div>
	
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header" style="background-color: black; color: white;">
                <h4 class="modal-title">新增床位</h4>
                <button type="button" class="close" data-dismiss="modal" style="color: white;">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="padding-right: 58px;">
                <div style="padding-left: 16px;">
<!--                    床位ID：-->
<!--                    <select class="sele3" id="mchuang">-->
<!--                        <option>-选择床-</option>-->
<!--                    </select>-->
                </div>
                <br/>
                <div style="padding-left: 16px;">
                    选择医院：
                    <select class="sele3" id="hospitalinfoid" onchange="huankeshi()">
                        <option>-选择医院-</option>
                    </select>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    选择科室：
                    <select class="sele3" id="hospitalinfoDepartmentid">
                        <option>-选择科室-</option>
                    </select>
                </div>
                <br/>

                <div  style="padding-left: 16px;">
                    股东:
                    <select class="sele3" id="usershareholderid">
                        <option>-选择股东-</option>
                    </select>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    维修人员:
                    <select class="sele3" id="usermaintenanceid">
                        <option>-选择维修人员-</option>
                    </select>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    一级分销商:
                    <select class="sele3" id="userdistributorsid1">
                        <option>-选择分销商-</option>
                    </select>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    二级分销商:
                    <select class="sele3" id="userdistributorsid2">
                        <option>-选择分销商-</option>
                    </select>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    厂家联系电话:
                    <input type="text" id="bedtypephone" class="input3"/>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    厂家联系地址:
                    <input type="text" id="bedtypeaddress" class="input3"/>

                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    厂家联系人:
                    <input type="text" id="bedtypecontacts" class="input3"/>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                   床位单价：
                    <input type="text" id="bedtypeprice" class="input3"/>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    收益分成(%)
                    <select id="revenueid" class="sele3">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="30">30</option>
                    </select>
                </div>
                <br/>
                <div  style="padding-left: 16px;">
                    备注：
                    <input type="text" id="bedmessagereamrk" class="input3"/>
                </div>
                <br/>

            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="add()">提交</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
</body>
</html>
<script>
    function add(){

        var hospitalinfoid=$("#hospitalinfoid").val();
        var hospitalinfoDepartmentid=$("#hospitalinfoDepartmentid").val();
        var usershareholderid=$("#usershareholderid").val();
        var usermaintenanceid=$("#usermaintenanceid").val();
        var userdistributorsid1=$("#userdistributorsid1").val();
        var userdistributorsid2=$("#userdistributorsid2").val();
        var bedtypephone=$("#bedtypephone").val();
        var bedtypeaddress=$("#bedtypeaddress").val();
        var bedtypecontacts=$("#bedtypecontacts").val();
        var bedtypeprice=$("#bedtypeprice").val();
        var revenueid=$("#revenueid").val();
        var bedmessagereamrk=$("#bedmessagereamrk").val();

        $.ajax({
            url:"/bed/insert",
            type:"post",
            datatype:"json",
            data:{"hospitalinfoid":hospitalinfoid,"hospitalinfoDepartmentid":hospitalinfoDepartmentid,"usershareholderid":usershareholderid
                ,"usermaintenanceid":usermaintenanceid,"userdistributorsid1":userdistributorsid1,"userdistributorsid2":userdistributorsid2
                ,"bedtypephone":bedtypephone,"bedtypeaddress":bedtypeaddress,"bedtypecontacts":bedtypecontacts,"bedtypecontacts":bedtypecontacts
                ,"bedtypeprice":bedtypeprice,"revenueid":revenueid,"bedmessagereamrk":bedmessagereamrk
            },
            success:function(data){
                if(data){
                    newRequest();
                }else{
                    alert("添加失败");
                }
            }
        })
    }
</script>

